<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="padding bg-white" v-if="editor">
			<form>
				<view class="padding text-center">
					<view class="avatar shadow" @click="ChooseCover">
						<view class="cu-avatar xxl round shadow" :style="'background-image:url('+this.data.userinfo.avatar+');'"></view>
						<view class="icon text-yellow"><text class="cuIcon-cameraadd"></text></view>
					</view>
				</view>
				<view class="cu-form-group margin-top">
					<view class="title">昵称</view>
					<input placeholder="给自己起一个好听的昵称" v-model="data.userinfo.nickname" name="nickname"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">邮箱</view>
					<input placeholder="请输入您的常用邮箱" v-model="data.userinfo.email" name="email"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号</view>
					<input placeholder="请输入您的联系电话" v-model="data.userinfo.phone" name="phone"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">性别</view>
					<radio-group style="flex: 1;" @change="ChangeGender">
						<label>
							<radio class='red radio' :class="data.userinfo.gender==1?'checked':''" :checked="data.userinfo.gender==1?true:false" value="1"></radio>
							<text class="padding-left-sm">男</text>
						</label>
						<label class="margin-left padding-left">
							<radio class='red radio' :class="data.userinfo.gender==2?'checked':''" :checked="data.userinfo.gender==2?true:false" value="2"></radio>
							<text class="padding-left-sm">女</text>
						</label>
						<label class="margin-left padding-left">
							<radio class='red radio' :class="data.userinfo.gender==0?'checked':''" :checked="data.userinfo.gender==0?true:false" value="0"></radio>
							<text class="padding-left-sm">保密</text>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">QQ号</view>
					<input placeholder="请输入您的QQ号" v-model="data.userinfo.qq" name="qq"></input>
				</view>
				<view class="cu-form-group align-start">
					<view class="title">兴趣爱好</view>
					<textarea maxlength="-1" v-model="data.userinfo.hobby" placeholder="希望能遇上知心朋友吧~"></textarea>
				</view>
				<view class="flex">
					<button class="cu-btn round bg-gradual-yellow lg text-boldm round-bottomleft-only flex-treble" @click="SubmitProfile">保存</button>
					<button class="cu-btn round bg-grey lg text-boldm round-right-only flex-sub" @click="editor=false">取消</button>
				</view>
			</form>
		</view>
		<view v-else>
			<view class="padding text-center bg-white">
				<view class="avatar shadow">
					<view class="cu-avatar xxl round shadow" :style="'background-image:url('+data.userinfo.avatar+');'"></view>
				</view>
			</view>
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text>昵称</text>
					</view>
					<view class="action">
						<text class="text-grey">{{data.userinfo.nickname}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text>邮箱</text>
					</view>
					<view class="action">
						<text class="text-grey">{{data.userinfo.email}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text>手机号</text>
					</view>
					<view class="action">
						<text class="text-grey">{{data.userinfo.phone}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text>性别</text>
					</view>
					<view class="action">
						<text class="text-grey" v-if="data.userinfo.gender==1">男</text>
						<text class="text-grey" v-else-if="data.userinfo.gender==2">女</text>
						<text class="text-grey" v-else>保密</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text>QQ号</text>
					</view>
					<view class="action">
						<text class="text-grey">{{data.userinfo.qq}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text>兴趣爱好</text>
					</view>
					<view class="action">
						<text class="text-grey">{{data.userinfo.hobby}}</text>
					</view>
				</view>
			</view>
			<view class="cu-list menu margin-top">
				<view class="cu-item arrow" @click="editor=true" v-if="!editor">
					<view class="content">编辑个人资料</view>
				</view>
				<view class="cu-item arrow" @click="showmodal='repwd'">
					<view class="content">修改登录密码</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="showmodal=='repwd'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{data.repassword?'重置':'设置'}}登录密码</view>
					<view class="action" @tap="showmodal=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding bg-white">
					<form>
						<view class="cu-form-group must" v-if="data.repassword">
							<view class="title">原 密 码</view>
							<input type="text" password="true" class="text-left" placeholder="请输入您的原登录密码" v-model="oldpassword" name="oldpassword"></input>
						</view>
						<view class="cu-form-group must">
							<view class="title">{{data.repassword?'新 密 码':'登录密码'}}</view>
							<input type="text" password="true" class="text-left" placeholder="请输入您的登录密码" v-model="newpassword" name="newpassword"></input>
						</view>
						<view class="cu-form-group must">
							<view class="title">确认密码</view>
							<input type="text" password="true" class="text-left" placeholder="请再次输入您的登录密码" v-model="confirmpassword" name="confirmpassword"></input>
						</view>
						<view class="padding flex flex-direction">
							<button class="cu-btn bg-blue lg" @click="repwd">确认修改</button>
						</view>
					</form>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	var UserInfo;
	var regmobile = /^(\+)?(86)?0?1\d{10}$/;
	var regmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
	
	export default {
		data() {
			return {
				editor:false,
				showmodal:'',
				oldpassword:'',
				newpassword:'',
				confirmpassword:'',
				data:{
					"title": "个人资料",
					"userinfo": {
						"hobby": "",
						"gender": 0,
						"qq": "",
						"phone": "",
						"email": "",
						"nickname": "",
						"avatar": ""
					},
					"repassword":true,
					"avatar": "",
				}
			}
		},
		onLoad() {
			
			this.data.avatar = core.system.defaultimg;
			this.initData('member/profile');
		},
		onShow() {
			
		},
		methods:{
			initData(route, data={}, callback=false){
				
				var that = this;
				that.data.userinfo=core.userinfo;
				console.log(core.userinfo)
				core.get(route,function(res){
					// if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
					// 	return core.report(res, true);
					// }
					// UserInfo = res.userinfo;
					// that.data = JSON.parse(JSON.stringify(res));
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			ChangeGender(e){
				this.data.userinfo.gender = e.detail.value;
			},
			async ChooseCover(){
				var that = this;
				alert(123)
				var data;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
				    success: (res) => {
						// var a= (await this.$api.reqPost({
						// 	url:"home/uploadImage",
						// 	data:{i:0,file:data.tempFilePaths[0]}
						// }));
						// uni.request({
						// 	url:"localhost:8070/home/uploadImage",
						// 	method:"POST",
						// 	data:{i:0,file:res.tempFilePaths[0]},
						// 	success(res) {
						// 		console.log(res)
						// 	}
						// })
						core.upload(res.tempFilePaths[0],function(res){
							that.data.avatar = res.data;
							that.data.userinfo.avatar = res.data;
						});
					}
				});
			},
			 async SubmitProfile(){
				let postdata = {};
				console.log(this.data.userinfo)
				for(var i in this.data.userinfo){
					//if(this.data.userinfo[i]!=UserInfo[i]){
						if(i=='phone' || i=='email'){
							if(this.data.userinfo[i]=='') return core.toast((i=='phone'?'手机号':'邮箱')+'不能为空');
							if(i=='phone' && !this.data.userinfo[i].match(regmobile)) return core.toast('手机号格式不正确');
							if(i=='email' && !this.data.userinfo[i].match(regmail)) return core.toast('邮箱格式不正确');
						}
						postdata[i] = this.data.userinfo[i];
					//}
				}
				if(postdata.length===0 || JSON.stringify(postdata)=="{}") return core.toast('请修改信息后再提交');
				var that = this;
				console.log(postdata);
				// return core.post('member/profile',function(res){
				// 	if(res.type!='success') return core.report(res);
				// 	core.toast('保存成功！','','success');
				// 	that.data.userinfo = JSON.parse(JSON.stringify(res.message.userinfo));
				// 	UserInfo = res.message.userinfo;
				// 	that.editor = false;
				// 	core.login(res.message.member, true);
				// },{data:postdata});
				(await this.$api.reqPost({
					url:"user/userUp",
					method:"POST",
					data:postdata
					}).then(res=>{
						if(res.code==200){
							core.toast('保存成功！','','success');
							that.editor = false;
						}
					}));
				
				// uni.request({
				// 	url:"http://localhost:8090/user/userUp",
				// 	method:"POST",
				// 	data:postdata,
				// 	success(res) {
				// 		if(res.data.code!=200) return core.report(res);
				// 		core.toast('保存成功！','','success');
				// 		that.data.userinfo = res.data.data;
				// 		// UserInfo = res.message.userinfo;
				// 		//123
				// 		 that.editor = false;
				// 		 //core.login(res.message.member, true);
				// 	}
				// })
			},
			async repwd(){
				if(this.data.userinfo.phone=='' && this.data.userinfo.email=='') return core.toast('请先设置邮箱或手机号');
				if(this.data.repassword && this.oldpassword=='') return core.toast('请输入旧登录密码');
				if(this.newpassword=='') return core.toast('请输入新的登录密码');
				if(this.confirmpassword=='') return core.toast('请输入确认登录密码');
				if(this.newpassword!=this.confirmpassword) return core.toast('两次输入的密码不一致');
				if(this.newpassword==this.oldpassword) return core.toast('新密码不能和旧密码一致');
				//alert(this.oldpassword);alert(this.newpassword);alert(this.confirmpassword)
				var that = this;
				// return core.post('member/password',function(res){
				// 	if(res.type=='success'){
				// 		that.showmodal = '';
				// 		core.logout();
				// 		core.toast(res.message,'home','loading');
				// 	}else{
				// 		core.report(res);
				// 	}
				// },{oldpassword:this.oldpassword,newpassword:this.newpassword,confirmpassword:this.confirmpassword});
				var res=(await this.$api.reqPost({
					url:"user/passwordUp",
					data:{uid:this.data.userinfo.uid,oldpassword:this.oldpassword,newpassword:this.newpassword,confirmpassword:this.confirmpassword},
				}));
				console.log(res)
				if(res!=null){
					that.showmodal = '';
					core.logout();
					core.navito('index/index', {}, 2);
				}
				// uni.request({
				// 	url:"http://localhost:8090/user/passwordUp",
				// 	method:"POST",
				// 	data:{uid:this.data.userinfo.uid,oldpassword:this.oldpassword,newpassword:this.newpassword,confirmpassword:this.confirmpassword},
				// 	success(res) {
				// 		that.showmodal = '';
				// 		core.logout();
				// 		core.navito('index/index', {}, 2);
				// 	}
				// })
			},
			unSupport(){
				return core.toast('敬请期待');
			}
		}
	}
</script>

<style>
	page{background: #FFFFFF;}
	.container{background: #F7F7F7;}
</style>
